<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>熵·水果忍者</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#2c3f51">
    <link rel="stylesheet" href="menja/style.css">
</head>

<body>
    <a href="../lab.html">
        <p style="position: fixed;top:10%;left:20px;z-index:10;">back</p>
    </a>
    <!-- Game canvas -->
    <canvas id="c"></canvas>
    <!-- Gameplay HUD -->
    <div class="hud" style="display: none;">
        <div class="hud__score">
            <div class="score-lbl" style="display: block;">SCORE: 0</div>
            <div class="cube-count-lbl" style="opacity: 0.65;">CUBES SMASHED: 0</div>
        </div>
        <div class="pause-btn">
            <div></div>
        </div>
        <div class="slowmo" style="opacity: 0;">
            <div class="slowmo__bar" style="transform: scaleX(0);"></div>
        </div>
    </div>
    <!-- Menu System -->
    <div class="menus has-active">
        <div class="menu menu--main active">
            <h1>切块</h1>
            <button type="button" class="play-normal-btn">开始游戏</button>
            <button type="button" class="play-casual-btn">休闲模式</button>
        </div>
        <div class="menu menu--pause">
            <h1>暂停</h1>
            <button type="button" class="resume-btn">重新开始</button>
            <button type="button" class="menu-btn--pause">主菜单</button>
        </div>
        <div class="menu menu--score">
            <h1>游戏结束</h1>
            <h2>分数:</h2>
            <div class="final-score-lbl"></div>
            <div class="high-score-lbl"></div>
            <button type="button" class="play-again-btn">再玩一次</button>
            <button type="button" class="menu-btn--score">主菜单</button>
        </div>
    </div>
    <script src="menja/index.js"></script>
</body>

</html>